<template>
    <el-button type="primary" @click="addopen()">添加</el-button>
    <el-table :data="list" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="300" />
        <el-table-column prop="productName" label="名字" width="300" />
        <el-table-column label="操作" width="300">
            <template v-slot="scop">
                <el-button type="primary" @click="xgopen(scop.row)">修改</el-button>
                <el-button type="danger" @click="Sc(scop.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="cPage" v-model:page-size="sPage" :page-sizes="[2, 4, 6, 8]" 
        :disabled="true" layout="total, sizes, prev, pager, next, jumper" :total="count"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <el-dialog  v-model="addct" title="添加" width="500" center>
        <el-form   ref="addUserRef" :rules="rules" :model="add" label-width="auto" style="max-width: 600px">
            <el-form-item label="姓名" prop="productName">
                <el-input v-model="add.productName" />
            </el-form-item>
            <el-button type="primary" @click="Add()">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog v-model="xgct" title="修改" width="500" center>
        <el-form  ref="updateUserRef" :model="xg" label-width="auto" style="max-width: 600px">
            <el-form-item label="编号">
                <el-input v-model="xg.id" disabled />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="xg.name" />
            </el-form-item>
            <el-button type="primary" @click="Xg()">确认</el-button>
        </el-form>
    </el-dialog>
</template>

<script>
import { ref, reactive } from 'vue'
import axios from 'axios';
export default {
    name: 'App',
    setup() {
        let list = ref([]);
        let count = ref(0);
        let cPage = ref(1);
        let sPage = ref(2);
        let addct = ref(false);
        let xgct = ref(false);
        let add = reactive({
            productName: '',
        })
        let xg = reactive({
            id: "",
            name: '',
        })
        let sc = reactive({
            id: '',
        })
        let addUserRef = ref(null);
        let updateUserRef=ref(null)
        const confirmForm = async () => {
    await addUserRef.value.validate()
}
const confirmForms = async () => {
    await updateUserRef.value.validate()
}
        function show() {

            axios.get('/api/Product/FenYe', {
                params: {
                    a: cPage.value,
                    b: sPage.value
                }
            }).then(res => {
                console.log(res.data);
                list.value = res.data.list;
                count.value = res.data.count;
            })
                .catch(err => {
                    console.log(err);
                })
        }
        function Add() {
           
           
                addUserRef.value.validate((valid)=>{
    	if(valid){
            
    		  // 这里可以执行提交表单的操作，比如发送请求到后端
              axios.post('https://localhost:7145/api/Product/Add', add)
                .then(res => {
                    console.log(res);
                    addct.value = false;
                    alert('添加成功！')
                    show();
                })
                .catch(err => {
                    console.log(err);
                })
    	}else{
    		//验证没有通过
            alert("为空")
    	}
    })


           
           
        }
        function Xg() {
           
                updateUserRef.value.validate((valid)=>{
    	if(valid){
           
    		  // 这里可以执行提交表单的操作，比如发送请求到后端
              axios.put('https://localhost:7145/api/Product/Update', {
                id: xg.id,
                productName: xg.name
            })
                .then(res => {
                    console.log(res);
                    xgct.value = false;
                    alert('修改成功！')
                    show();
                })
                .catch(err => {
                    console.log(err);
                })
    	}else{
    		//验证没有通过
            alert("为空")
    	}
    })
       
           
        }
        function Sc(res) {
            if (confirm("确定删除吗？")) {
                sc.id = res;
                axios.delete('https://localhost:7145/api/Product/Remove', {
                    params: {
                        id: sc.id
                    }
                })
                    .then(res => {
                        console.log(res);
                        alert('删除成功！')
                        show();
                    })
                    .catch(err => {
                        console.log(err);
                    })
            }
        }
        function handleSizeChange(res) {
            sPage.value = res;
            show();
        }
        function handleCurrentChange(res) {
            cPage.value = res;
            show();
        }
        function addopen() {
            add.productName = '';
            addct.value = true;
        }
        function xgopen(res) {
            xgct.value = true;
            xg.id = res.id;
            xg.name = res.productName;
        }
        let rules = {
            productName: [
                {
                    required: true,
                    message: "请输入登录名称",
                    trigger: "blur"
                },
            ],
        }
        show();
        return {
            list,
            count,
            cPage,
            sPage,
            addct,
            xgct,
            add,
            xg,
            rules,
            show,
            handleSizeChange,
            handleCurrentChange,
            addopen,
            xgopen,
            Add,
            Xg,
            Sc,
            addUserRef,
            updateUserRef,
            confirmForm,
            confirmForms
        }
    }
}
</script>

<script lang="ts" setup>

</script>